<template>
  <div py-96>
    <div text-center>
      <h1 text-40 mb-22>便捷<span class="text-#448BF5">API</span></h1>
      <div class="text-#5F6368 text-18 mb-82">
        简单易用的API接口，快速接入支付功能，支持多种开发语言
      </div>
    </div>
    <div flex items-center justify-center gap-48>
      <div>
        <h2 text-35>简单易用的支付接口</h2>
        <div w-556 mt-16 mb-58 class="text-#5F6368">
          熵付通提供简洁明了的API文档和SDK，支持PHP、Java、Python、Node.js等多种语言，开发者可以快速接入支付功能。
        </div>
        <div pl-36 pb-40>
          <div v-for="(i, idx) in list" :key="idx" mb-24>
            <h2 text-20>{{ i.title }}</h2>
            <div class="tetx-#5F6368 text-16 mt-10">{{ i.desc }}</div>
          </div>
        </div>
        <div class="btn-group">
          <el-button size="large" type="primary" @click="jump('/apiDocs')"
            >查看API文档</el-button
          >
          <el-button
            size="large"
            type="primary"
            color="transparent"
            class="second-btn"
            @click="jump('/plugin')"
            >下载SKD
          </el-button>
        </div>
      </div>
      <img src="@/assets/image/api-code.png" alt="" h-952 />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, shallowReactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const list = shallowReactive([
  {
    title: '快速接入',
    desc: '完善的API文档和示例代码，最快1小时完成接入'
  },
  {
    title: '安全保障',
    desc: '多重签名验证和数据加密，保障交易安全'
  },
  {
    title: '多语言支持',
    desc: '提供PHP、Java、Python、Node.js等多种语言SDK'
  },
  {
    title: '技术支持',
    desc: '7×24小时技术支持，解决开发中的问题'
  }
])

const jump = (path: string) => {
  router.push(path)
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

<style scoped lang="scss">
.btn-group {
  .el-button {
    height: 50px;
    padding: 13px 32px;
    font-size: 16px;
    border-radius: 6px;
  }
  .second-btn {
    color: #448bf5;
    border: 1px solid #448bf5;
    &:hover {
      background-color: #448bf5;
      color: #fff;
    }
  }
}
</style>
